<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	template="../pages/template.xhtml">
	<ui:define name="head">
		<title>#{msg.informeUsuario}</title>
	</ui:define>
	<ui:define name="left"></ui:define>
	<ui:define name="center">
		<h:form prependId="false" styleClass="formPrincipal">
			<p:growl id="msgs" showDetail="true" />
			<!-- Mirar el p:collector -->
			<p:ajaxStatus style="width:16px;height:16px;">
				<f:facet name="start">
					<h:graphicImage value="../images/loading.gif" />
				</f:facet>
				<f:facet name="complete">
					<h:outputText value="" />
				</f:facet>
			</p:ajaxStatus>
			<p:panel header="#{msg.criterios}" id="nuevo">
				<h:panelGrid columns="3" cellspacing="6">
					<p:panel>
						<h:panelGrid colums="2">
							<h:outputLabel value="#{msg.sexo}:"></h:outputLabel>
							<p:selectOneRadio value="#{informeUsuariosBean.sexo}">
								<f:selectItem itemLabel="#{msg.hombre}" itemValue="Hombre" />
								<f:selectItem itemLabel="#{msg.mujer}" itemValue="Mujer" />
							</p:selectOneRadio>
						</h:panelGrid>
					</p:panel>
					<p:panel>
						<h:outputLabel value="#{msg.edad}:"></h:outputLabel>
						<h:panelGrid columns="8">
							<h:outputLabel value="#{msg.edad1}"></h:outputLabel>
							<p:selectBooleanCheckbox value="#{informeUsuariosBean.menos18}" />
							<h:outputLabel value="#{msg.edad2}"></h:outputLabel>
							<p:selectBooleanCheckbox value="#{informeUsuariosBean.de18a40}" />
							<h:outputLabel value="#{msg.edad3}"></h:outputLabel>
							<p:selectBooleanCheckbox value="#{informeUsuariosBean.de40a60}" />
							<h:outputLabel value="#{msg.edad4}"></h:outputLabel>
							<p:selectBooleanCheckbox value="#{informeUsuariosBean.mas60}" />
						</h:panelGrid>
					</p:panel>
					<h:panelGrid columns="2">
						<h:outputLabel value="#{msg.nacinalidad}:"></h:outputLabel>
						<p:selectManyMenu
							value="#{informeUsuariosBean.paisesSeleccionados}"
							style="height:100px">
							<f:selectItems value="#{informeUsuariosBean.paises}" var="pais"
								itemLabel="#{pais}" itemValue="#{pais}" />
						</p:selectManyMenu>
					</h:panelGrid>

					<p:commandButton value="#{msg.buscar}"
						action="#{informeUsuariosBean.filtrar}"
						update="usuariosList,usuarios"></p:commandButton>
					<p:commandButton value="#{msg.limpiar}"
						action="#{informeUsuariosBean.limpiar}" update="@form"></p:commandButton>
				</h:panelGrid>
			</p:panel>
			<p:panel header="#{msg.listadoUsuarios}" style="margin-top: 10px;"
				id="usuariosList">
				<p:dataTable id="usuarios" value="#{informeUsuariosBean.usuarios}"
					var="usuarioVar" emptyMessage="#{msg.tablaVacia}" paginator="true"
					rows="20">
					<p:column style="width:125px">
						<f:facet name="header">
							<h:outputText value="#{msg.dni}" />
						</f:facet>
						<h:outputText value="#{usuarioVar.dniPassaporte}" />
					</p:column>
					<p:column style="width:125px">
						<f:facet name="header">
							<h:outputText value="#{msg.nombre}" />
						</f:facet>
						<h:outputText value="#{usuarioVar.nombre}" />
					</p:column>
					<p:column headerText="" style="width:125px">
						<f:facet name="header">
							<h:outputText value="#{msg.apellidos}" />
						</f:facet>
						<h:outputText value="#{usuarioVar.apellidos}" />
					</p:column>
					<p:column style="width:125px">
						<f:facet name="header">
							<h:outputText value="#{msg.direccion}" />
						</f:facet>
						<h:outputText value="#{usuarioVar.direccion}" />
					</p:column>
					<p:column style="width:125px">
						<f:facet name="header">
							<h:outputText value="#{msg.telefono}" />
						</f:facet>
						<h:outputText value="#{usuarioVar.telefono}" />
					</p:column>
					<p:column style="width:125px">
						<f:facet name="header">
							<h:outputText value="#{msg.fechaNacimiento}" />
						</f:facet>
						<h:outputText value="#{usuarioVar.fechaNacimiento}" />
					</p:column>
					<p:column style="width:125px">
						<f:facet name="header">
							<h:outputText value="#{msg.sexo}" />
						</f:facet>
						<h:outputText value="#{usuarioVar.sexo}" />
					</p:column>
					<p:column style="width:125px">
						<f:facet name="header">
							<h:outputText value="#{msg.nacinalidad}" />
						</f:facet>
						<h:outputText value="#{usuarioVar.nacionalidad}" />
					</p:column>
					<p:column style="width:125px">
						<f:facet name="header">
							<h:outputText value="#{msg.documentacion}" />
						</f:facet>
						<h:outputText value="#{usuarioVar.documentacion}" />
					</p:column>
				</p:dataTable>
				<p:panel header="#{msg.generar}">
					<h:commandLink>
						<p:graphicImage value="../images/excel.png" />
						<p:dataExporter type="xls" target="usuarios" fileName="usuarios" />
					</h:commandLink>
					<p:commandLink action="#{informeUsuariosBean.preProcessPDF}"
						title="#{msg.exportar}" oncomplete="dlgPdf.show();">
						<p:graphicImage value="../images/pdf.png" />
					</p:commandLink>
				</p:panel>
			</p:panel>
			<p:dialog modal="true" header="#{msg.confirmacion}" widgetVar="dlgPdf"
				id="dlgPdf">
				<h:outputLabel
					value="#{msg.informeGenerado}"></h:outputLabel>
				<p:commandButton value="#{msg.ok1}" onclick="dlgPdf.hide();"></p:commandButton>
			</p:dialog>
		</h:form>
	</ui:define>
</ui:composition>